<template>
  <view>
    <view class="search-con ml30 mb20">
      <u-search placeholder="请输入名称检索商品" v-model="clothName" :showAction="false" @search="search"></u-search>
    </view>
    <view class="mt60">
      <u-tabs
        :current="sexTab"
        :list="tabs"
        lineWidth="30"
        lineColor="#675000"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#666666',
        }"
        itemStyle="width: 49%;padding-left: 15px; padding-right: 15px; height: 34px;"
        @click="tabClick"
      >
      </u-tabs>
    </view>
    <view class="flex mt40">
      <view class="left">
        <view
          class="class-item flex-center f13"
          :class="{ on: cur == idx }"
          v-for="(item, idx) in classList"
          :key="idx"
          @click=";(cur = idx), (categoryOne = item), getCategoryTwoList()"
        >
          {{ item }}
        </view>
      </view>
      <view class="right pl30 pr30">
        <!-- 热销榜单
        <view class="hot" v-if="cur == 0">
          <view class="flex-between flex-align mb15 pl30 pr30 f12 hot-item" style="background-color: #f5f5f5">
            <text>成衣热销榜</text>
            <image src="@/static/images/hot(1).png" mode="scaleToFill" style="width: 42rpx; height: 42rpx" />
          </view>
          <view class="flex-between flex-align mb15 pl30 pr30 f12 hot-item" style="background-color: #f5f5f5">
            <text>实力推荐榜</text>
            <image src="@/static/images/hot(2).png" mode="scaleToFill" style="width: 42rpx; height: 42rpx" />
          </view>
          <view class="flex-between flex-align pl30 pr30 f12 hot-item" style="background-color: #f5f5f5">
            <text>折扣促销榜</text>
            <image src="@/static/images/hot(3).png" mode="scaleToFill" style="width: 42rpx; height: 42rpx" />
          </view>
          <view class="mt30 mb30 color-info">销量榜单</view>
        </view>
        品牌
        <view class="" v-if="cur == 2">
          <view class="mb80" v-for="(item, idx) in brandList" :key="idx" @click="clickBrand(item)">
            {{ item }}
          </view>
        </view>
        -->
        <!-- 二级分类 -->
        <navigator
          :url="`/class/classGoods?categoryOne=${categoryOne}&categoryTwo=${item}&categoryTre=${
            sexTab == 1 ? '男' : '女'
          }`"
          hover-class="none"
          class="mb20 ml30"
          v-for="(item, idx) in categoryTwoList"
          :key="idx"
        >
          {{ item }}
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import homeApi from '@/api/homeApi'
import { onMounted, ref } from 'vue'

const sexTab = ref(0)
const tabs = ref([
  {
    name: '女装',
  },
  {
    name: '男装',
  },
])
const cur = ref(0)
const brandList: any = ref([
  '品牌名SALTS',
  '品牌名23132',
  '品牌名SALTS',
  '品牌名23132',
  '品牌名SALTS',
  '品牌名23132',
  '品牌名SALTS',
  '品牌名23132',
])
const classList: any = ref([
  { name: '热销榜单' },
  { name: '新品推荐' },
  { name: '品牌' },
  { name: '成衣' },
  { name: '鞋履' },
  { name: '配饰' },
  { name: '穿搭' },
])

const tabClick = (row: any) => {
  sexTab.value = row.index
  getCategoryList()
}
const clickBrand = (item: any) => {
  uni.navigateTo({
    url: `/class/classGoods`,
  })
}
onMounted(() => {
  getCategoryList()
})

const categoryOne = ref('')
const getCategoryList = () => {
  homeApi
    .getCategoryList({
      sex: sexTab.value == 1 ? '男' : '女',
    })
    .then((res: any) => {
      classList.value = res
      categoryOne.value = res[0]

      getCategoryTwoList()
    })
}
const categoryTwoList: any = ref([])
const getCategoryTwoList = () => {
  homeApi
    .getCategoryTwoList({
      categoryOne: categoryOne.value,
      categoryTre: sexTab.value == 1 ? '男' : '女',
    })
    .then((res: any) => {
      categoryTwoList.value = res
    })
}

const clothName = ref('')
const search = () => {
  uni.navigateTo({
    url: `/class/classGoods?clothName=${clothName.value}&categoryOne=${categoryOne.value}&categoryTre=${
      sexTab.value == 1 ? '男' : '女'
    }`,
  })
}
</script>

<style>
page {
  padding-top: calc(var(--status-bar-height) + 30px);
}
</style>

<style lang="scss" scoped>
.right {
  width: 69%;
  height: 80vh;
  overflow-y: scroll;

  .hot-item {
    width: 100%;
    height: 90rpx;
    background-color: #f5f5f5;
  }
}

.left {
  width: 30%;
  height: 80vh;
  border-right: 1px solid #dddddd;

  .class-item {
    width: 100%;
    height: 90rpx;
    border-left: 2px solid #fff;
  }

  .on {
    background-color: #f5f5f5;
    border-left: 2px solid #675000;
  }
}

.search-con {
  width: 70%;
}
</style>
